<template>
	<!-- 注册 -->
	<view class="me-header" style="background: linear-gradient(180deg,#0081ff,#069cff 10%,rgba(255,214,41,.01) 90%);
}">
		<view class="" style="height: 250rpx; width: 100%;">

		</view>
		<view class="form-box">
			<view class="form-item">
				<view class="form" style="">
					<input type="text" class="pl-5" style="" v-model="user.mail" placeholder="请输入邮箱" />
					<view style="position: absolute; top: -20rpx;left: 50rpx;">
						<view
							style="background: #fff;text-align: center; width: 80rpx;height: 30rpx;font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #89878D;">
							账号
						</view>
					</view>
				</view>
			</view>

			<!-- 	<view class="form-item" >
				<view  class="form" style="">
					<input type="number" class="pl-5" style=""
					 v-model="user.verifyCode" placeholder="请输入验证码" />
					<view  style="position: absolute;top: -20rpx;left: 50rpx;">
						<view class="bgffff text-center" style="background: #fff;text-align: center;width: 100rpx;height: 30rpx;font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #89878D;">
							验证码
						</view>
					</view>
					<view @tap="getCode" class="position-absolute" style="position: absolute; z-index: 999; font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #2E3CE2;top: 50%;transform: translateY(-50%);right: 30rpx;">
						{{verifyTime == 60 ?'获取验证码':"发送中"+verifyTime}}
					</view>
				</view>
			
			
			
			</view> -->

			<view class="form-item">
				<view class="form" style="">
					<input type="password" class="pl-5" style="" v-model="user.passowrd" placeholder="请输入密码" />
					<view style="position: absolute; top: -20rpx;left: 50rpx;">
						<view
							style="background: #fff;text-align: center; width: 80rpx;height: 30rpx;font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #89878D;">
							密码
						</view>
					</view>
				</view>

			</view>
			<view class="form-item">
				<view class="form" style="">
					<input type="password" class="pl-5" style="" v-model="user.affirmPass" placeholder="请输入确认密码" />
					<view style="position: absolute; top: -20rpx;left: 50rpx;">
						<view
							style="background: #fff;text-align: center; width: 130rpx;height: 30rpx;font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #89878D;">
							确认密码
						</view>
					</view>
				</view>

			</view>

			<view style="margin-top: 50rpx; display: flex;align-items: center;justify-content: center;" @tap="HLogin">
				<view class="btn-login d-flex a-center j-center">
					注 册
				</view>
			</view>
			<view style="margin-top: 50rpx; display: flex;align-items: center;justify-content: center;"
				@tap="toRegister">
				<view style="background: #fff;color: #000;border: 1rpx solid #0081ff;"
					class="btn-login d-flex a-center j-center">
					返 回
				</view>
			</view>



		</view>



		<!-- 
		<view class="" style="position: fixed;bottom: 30rpx;width: 90%;">
			<view style="display: flex;align-items: center;justify-content: center;width: 100%;">
				<view class="" style="width: 145rpx;height: 3rpx;background: #CCCCCC;">

				</view>
				<view class="mx-5" style="margin: 0 50rpx; font-size: 28rpx;font-family: PingFang SC;color: #333333;">
					其他方式登录
				</view>
				<view class="" style="width: 144rpx;height: 3rpx;background: #CCCCCC;">

				</view>
			</view>
			<view class="" style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;">
				<image style="width: 50rpx;height: 50rpx;" src="../../../static/huiyuan/weixin.png" mode=""></image>
			</view>
		
		</view>

 -->


	</view>



	</view>
</template>

<script>
	import {
		login
	} from '@/mixin/login.js'
	export default {
		mixins: [login],
		data() {
			return {
				// 验证码获取倒计时60秒
				verifyTime: 60,
				// 用户表单
				user: {
					mail: "",
					verifyCode: "",
					passowrd: "",
					affirmPass: ""
				},
				// 是否是获取验证码状态
				isEendCode: false
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo
			}
		},
		mounted() {

		},
		methods: {
			toRegister() {
				uni.navigateTo({
					url: "/pages/my/login/login"
				})
			},
			// h5注册
			async HLogin() {
				var that = this
				var systemInfo = uni.getSystemInfoSync()
				var isMobile = this.$U.reg.isEmail(this.user.mail)
				if (isMobile) {
					return
				}
				// var isEmpty = this.$U.reg.isEmpty(this.user.verifyCode, '验证码为空')

				// if (isEmpty) {
				// 	return
				// }
				console.log(this.user)
				if (this.user.passowrd !== this.user.affirmPass) {
					return uni.showToast({
						title: "两次密码不一致",
						icon: "none"
					})
				}
				if (this.user.passowrd.length < 3) {
					return uni.showToast({
						title: "密码不能小于3位",
						icon: "none"
					})
				}

				that.name = '昵称_' + String(Date.now()).slice(9); //昵称
				that.avatar = "/static/default.jpg"; //头像
				that.openId = this.user.mail
				that.password = this.user.passowrd
				uni.showLoading({
					title: '登录中...'
				});
				try {
					var data = await this.$api.registerMail({
						username:this.user.mail,
						password:this.user.passowrd,
						mptype:"app_email"
					})
					if(data.code == 0){
						uni.showToast({
							title:"注册成功",
						})
						console.log(data.userInfo,'999999999999')
						uni.setStorageSync('user',data.userInfo)
						setTimeout(()=>{
							this.initUserData();
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/my/my"
								})
							}, 500)
						},500)
					}
				}catch(err){
					uni.showToast({
						title:err.msg,
						icon:"none"
					})
					console.log(err)
				}
				

				// var data = await this.$api.Hregister({
				// 	...this.user,
				// 	mobile: systemInfo.model + ' - ' + systemInfo.system
				// })
				// if (data.code == 1) {
				// 	uni.showToast({
				// 		title: "注册成功",
				// 		icon: "none"
				// 	})
				// 	setTimeout(() => {
				// 		uni.navigateTo({
				// 			url: "/pages/my/login/login"
				// 		})
				// 	}, 300)
				// }
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.btn-login {
		width: 85vw;
		height: 90rpx;
		background: linear-gradient(80deg, #0081ff,#069cff);
		box-shadow: 0px 5rpx 9rpx 0px rgba(0, 0, 0, 0.2);
		border-radius: 41rpx;
		display: flex;
		align-items: center;
		justify-content: center;


		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;

	}
</style>

<style scoped lang="scss">
	.form-box {
		.form-item {
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.form {
				position: relative;
				box-sizing: border-box;
				border-radius: 50rpx;
				width: 651rpx;
				height: 98rpx;

				input {
					font-size: 35rpx;
					box-sizing: border-box;
					border-radius: 50rpx;
					width: 651rpx;
					height: 98rpx;
					border: 1rpx solid #B0AFB5;
					padding: 0 30rpx;
				}
			}
		}
	}

	.me-header {
		padding: 30rpx;
		position: relative;
		background: linear-gradient(180deg, #0081ff,#069cff 10%, rgba(255, 214, 41, .01) 90%);
		height: 340rpx;
		z-index: 2;
	}
</style>
